<template>
    <div ref="eCharts" style="height: 100%"> </div>
</template>

<script>
    import BaseCharts from "./BaseCharts";

    export default {
        name: "GaugeCharts",
        mixins:[BaseCharts],
        mounted(){
            this.$nextTick(function (){
                this.draw();
            })
        },
        methods: {
            draw() {
                var option = {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    series: [{
                        name: 'Pressure',
                        type: 'gauge',
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}'
                        },
                        data: [{
                            value: 50,
                            name: 'SCORE'
                        }]
                    }]
                };

                this.drawCharts(option);
            }
        }
    }
</script>

<style scoped>

</style>